<template>
	<!-- 退款申请 -->
	<view class="display width_750  displayColumn">
		<u-navbar @rightClick="rightClick" :autoBack="true" :placeholder="true">
			<template slot="left">
				<uni-icons type="left" color="#212121;" size="23"></uni-icons>
			</template>
			<template slot="center">
				<text class="fontSize font_comm title">取消订单</text>
			</template>
		</u-navbar>
		<view class="fn_content width_750  display all_item displayColumn">
			<view class="fn_content_one display  all_item displayColumn width_699 M-T30 fontSize font_comm">
				<view class="fn_item display  displaycenter_aliem width-100">
					<span class="fn_txt1 M-L24">退款金额</span>
					<span class="fn_txt2 M-R24">￥<span style="font-size: 40rpx;">{{info.money}}</span></span>
				</view>
				<view class="fn_item display  displaycenter_aliem width-100 M-T20">
					<span class="fn_txt1 M-L24">退款理由</span>
					<uni-data-select style="margin-right: 24rpx;" v-model="value" :localdata="range"
						@change="change"></uni-data-select>
				</view>
			</view>
			<!-- 按钮 -->
			<view class="fn_content_two display  width_750  all_item" style="margin-top: 822rpx;">
				<button class="fontSize font_comm font_butn all_item display" @click="cancle">确定取消</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: null,
				info: {},
				range: [{
						value: 0,
						text: "不用了"
					},
					{
						value: 1,
						text: "其他原因"
					}
				],
			}
		},
		onLoad(options) {
			// this.info = options.info
			let x = options.info
			// console.log(x)
			this.info = JSON.parse(x)
		},
		methods: {
			// 退款原因
			change(e) {
				console.log("e:", e);
				this.value = e;
			},
			cancle() {
				// 判断是否为微信支付
				if (this.info.payType != '3') {
					this.$modal.confirm('确定取消预约吗').then(res => {
						// console.log(res)
						// res 为true代表确定
						if (res) {
							this.$modal.loading('取消中')
							let data = {
								remark: this.range[this.value].text
							}
							this.$req.get(`/xcx/orderReservation/cancel/${this.info.id}`, data).then(res => {
								// console.log(res)
								this.$modal.closeLoading()
								if (res.data.code == 200) {
									this.$modal.msg('取消成功');
									setTimeout(() => {
										this.$tab.reLaunch('/pages/index/index');
									}, 500)
								} else {
									this.$modal.msg(res.data.msg);
								}
							})
						}
					})
				} else {
					this.$modal.confirm('确定取消预约吗').then(res => {
						let datas = {
							id: this.info.id,
							remark: this.range[this.value].text
						}
						console.log(datas)
						if (res) {
							this.$modal.loading('取消中')
							this.$req.post(`/refund/reservationOrder`, datas).then(res => {
								this.$modal.closeLoading()
								console.log(res)
								if (res.data.code == 200) {
									this.$modal.msg('取消成功');
									setTimeout(() => {
										this.$tab.reLaunch('/pages/index/index');
									}, 500)
								} else {
									this.$modal.msg(res.data.msg);
								}
							})
						}
					})
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.title {
		font-weight: 600;
		font-size: 34rpx;
		color: #232323;
	}

	.fn_content_one {
		height: 148rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
	}

	.fn_item {
		justify-content: space-between;
	}

	.fn_txt1 {
		font-weight: 600;
		font-size: 28rpx;
		color: #000000;
	}

	.fn_txt2 {
		font-weight: 600;
		font-size: 24rpx;
		color: #FF672D;
	}

	.font_butn {
		width: 690rpx;
		height: 84rpx;
		background: rgba(18, 107, 201, 0.1);
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		border: 2rpx solid linear-gradient(90deg, rgba(23, 105, 143, 1), rgba(173, 157, 246, 1), rgba(23, 105, 143, 1)) 2 2;
		font-weight: 600;
		font-size: 28rpx;
		color: #126BC9;
	}
</style>